<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中兴商城ZTEmall.com_中兴手机Axon30 Pro、Axon30 Ultra、努比亚红魔6Pro、中兴路由器、中兴智能家居、官网正品保障</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/promise_ajax1.js"></script>
    <script src="../js/code.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2841806_tgc0ntb0k.css">
</head>
<style>
    .createCode {
        user-select: none;
    }

    .right {
        font-size: 16px;
        color: green;
    }
</style>

<body>
    <!-- 头部logo -->
    <div class="header">
        <div class="header-lg w cl">
            <a href="../html/index-ZTE.html">
                <img src="../images/logo.png" alt="">
            </a>
        </div>
    </div>
    <!-- 用户注册区 -->
    <div class="main">
        <div class="form-control">
            <h1 class="header-title">用户注册</h1>
            <!-- 表单 -->
            <form onsubmit="return false">
                <ul class="formList">
                    <li>
                        <label for=""><span>* </span>手机号</label>
                        <input type="text" class="phoneInp" placeholder="手机号" autofocus="">
                        <span class="phoneSpan"></span>
                    </li>
                    <li>
                        <label for=""><span>* </span>设置密码</label>
                        <input type="password" class="pwdInp" placeholder="6-20个字符" autofocus="">
                        <span class="pwdSpan"></span>
                        <div class="pwdStrength">
                            <span>安全程度</span>
                            <span class="progress">
                                <span class="weak">弱</span>
                                <span class="good">中</span>
                                <span class="strong">强</span>
                            </span>
                        </div>
                    </li>
                    <li>
                        <label for=""><span>* </span>确认密码</label>
                        <input type="password" class="pwdrelInp" placeholder="再次填写密码" autofocus="">
                        <span class="pwdrelSpan"></span>
                    </li>
                    <li>
                        <label for=""><span>* </span>验证码</label>
                        <input type="text" class="codeInp" placeholder="" autofocus="">
                        <span class="createCode">a1b2</span>
                        <span class="code_span">看不清？换一张</span>
                        <span class="codeSpan"></span>
                    </li>
                    <li>
                        <input type="checkbox" class="protocolInp">&emsp;
                        <label class="protocolCon" for="">我已阅读并同意<span>《会员注册协议》</span></label>
                        <span class="protocolSpan"></span>
                        <a class="go-login" href="../html/login-ZTE.html"><span>已有帐号？去登录 »</span></a>
                    </li>
                    <li>
                        <button type="" class="registerBtn">立即注册</button>
                    </li>
                </ul>
            </form>
        </div>
    </div>
    <!-- 底部导航与版权 -->
    <div class="footer">
        <div style="text-align: center;">
            <img src="https://image.ztemall.com/4838cc505d2a981c5ae09c56958d8895.png">
        </div>
        <div class="footer-text" style="text-align: center;">增值电信业务经营许可证:
            <span>合字B2-20210066</span> | ICP备案证书号:<span>粤ICP备16018970号 | 粤公网安备 44030502005102号| 营业执照</span>
            <img src="https://szcert.ebs.org.cn/Images/govIcon.gif" alt="">
        </div>
    </div>
</body>
<script>
    var isUserOk = false;
    var isPwdOk = false;
    var isPwdrelOk = false;
    var isCodeOk = false;
    var isprotocolOk = false;

    $(".createCode").text(randCode());
    $(".createCode").click(function () {
        $(".createCode").text(randCode());
    })

    // 手机号判断和ajax请求 
    $(".phoneInp").on("input", function () {
        isPhoneOk = false;
        var phone = $(".phoneInp").val().trim();
        $(".phoneInp").val(phone);

        var phoneReg = /^1[3-9]\d{9}$/;

        if (phoneReg.test(phone)) {
            isExistPhone({ phone }).then(result => {
                var { status, msg } = result;
                if (!status) {
                    $(".phoneSpan").text("√");
                    $(".phoneSpan").css("color", "green");
                    isPhoneOk = true;
                } else {
                    $(".phoneSpan").text("手机号已存在");
                    $(".phoneSpan").css("color", "red");
                }
            }).catch(err => {
                throw err;
            })
        } else {
            $(".phoneSpan").text("* 手机号码格式不正确");
            $(".phoneSpan").css("color", "red");
        }
    })

    // 密码判断
    $(".pwdInp").on("input", function () {
        var pwd = $(".pwdInp").val().trim();
        isPwdOk = false;

        var pwdReg = /^[\w$]{6,12}$/;

        if (pwdReg.test(pwd)) {
            $(".pwdSpan").text("√");
            $(".pwdSpan").css("color", "green");

            var isExistNum = false;
            var isExistSmall = false;
            var isExistBig = false;

            if (/[0-9]/.test(pwd)) isExistNum = true;
            if (/[a-z]/.test(pwd)) isExistSmall = true;
            if (/[A-Z]/.test(pwd)) isExistBig = true;

            // var isExistNum = /[0-9]/.test(pwd) ? true :false;

            var sum = isExistNum + isExistSmall + isExistBig;

            //  true + true + false

            if (sum == 1) {
                $(".weak").css({ "background": "green" })
                $(".good").css({ "background": "#cccccc" })
                $(".strong").css({ "background": "#cccccc" })
            } else if (sum == 2) {
                $(".good").css({ "background": "yellow" })
                $(".weak").css({ "background": "#cccccc" })
                $(".strong").css({ "background": "#cccccc" })
            } else if (sum == 3) {
                $(".strong").css({ "background": "red" })
                $(".weak").css({ "background": "#cccccc" })
                $(".good").css({ "background": "#cccccc" })
            }

            isPwdOk = true;

        } else {
            $(".pwdSpan").text("* 密码由数字,大小写字母,下划线,$组成,6-12位");
            $(".pwdSpan").css("color", "red");
        }
    })

    // 密码确认判断
    $(".pwdrelInp").on("input", function () {
        var pwdrel = $(".pwdrelInp").val().trim();
        isPwdrelOk = false;

        if ($(".pwdrelInp").val() == $(".pwdInp").val()) {
            $(".pwdrelSpan").text("√");
            $(".pwdrelSpan").css("color", "green");
            isPwdrelOk = true;
        } else {
            $(".pwdrelSpan").text("* 您两次输入的密码不一致");
            $(".pwdrelSpan").css("color", "red");
        }
    })

    // 验证码验证
    $(".codeInp").on("input", function () {
        isCodeOk = false;
        var code = $(".codeInp").val().trim();
        $(".codeInp").val(code);

        var RCode = $(".createCode").text();   //随机的验证码
        var codeReg = new RegExp(`^${RCode}$`, "i");

        if (codeReg.test(code)) {
            $(".codeSpan").text("√");
            $(".codeSpan").css("color", "green");
            isCodeOk = true;
        } else {
            $(".codeSpan").text("* 验证码有误");
            $(".codeSpan").css("color", "red");
        }
    })

    // 勾选协议验证
    $(".protocolInp").click(function () {
        if ($(".protocolInp").prop('checked') == true) {
            isprotocolOk = true;
        } else {
            $(".protocolSpan").text("* 请勾选注册协议");
            $(".protocolSpan").css("color", "red");
        }
    })


    // 验证注册和ajax请求
    var isRegisterSuccess = false;  // 记录是否注册成功
    $(".registerBtn").click(function () {

        if (isRegisterSuccess) return false;
        if (isPhoneOk && isPwdOk && isPwdrelOk && isCodeOk && isprotocolOk) {
            // alert("注册成功");

            var phone = $(".phoneInp").val();
            var pwd = $(".pwdInp").val();

            register({ phone, pwd }).then(result => {
                var { status, msg } = result;
                if (status) {
                    isRegisterSuccess = true;
                    location.href = "./login-ZTE.html";
                } else {
                    alert(msg);
                    isRegisterSuccess = false;
                }
            }).catch(err => {
                throw err;
            })
        } else {
            isRegisterSuccess = false;
        }
    })
</script>

</html>